<template>

  <div>

  <el-card  shadow="never" class="box-card">

    <div>
      <i class="el-icon-search"></i>
      <span>筛选搜索</span>
      <el-button
        style="float: right"
        type="primary"
        size="small">
        查询结果
      </el-button>
      <el-button
        style="float: right;margin-right: 15px"
        size="small">
        重置
      </el-button>


      <div>
        <el-form  :inline="true" style="margin-top: 15px" ref="form" :model="form" label-width="140px">

          <el-form-item label="输入搜索">
            <el-input  style="width: 203px" ></el-input>
          </el-form-item>

          <el-form-item label="商品货号">
            <el-input  style="width: 203px" ></el-input>
          </el-form-item>

          <el-form-item label="商品分类">
            <el-select  placeholder="请选择" style="width: 203px" >
              <el-option label="分类一" value="shanghai"></el-option>
              <el-option label="分类二" value="beijing"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="商品品牌">
            <el-select  placeholder="请选择" style="width: 203px" >
              <el-option label="品牌一" value="shanghai"></el-option>
              <el-option label="品牌二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上架状态">
            <el-select  placeholder="请选择" style="width: 203px" >
              <el-option label="品牌一" value="shanghai"></el-option>
              <el-option label="品牌二" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="审核状态">
            <el-select  placeholder="请选择" style="width: 203px" >
              <el-option label="品牌一" value="shanghai"></el-option>
              <el-option label="品牌二" value="beijing"></el-option>
            </el-select>
          </el-form-item>



        </el-form>
      </div>



    </div>








  </el-card>


  <el-card style="margin-top: 20px" shadow="never">

    <i class="el-icon-tickets"></i>
    <span>数据列表</span>


    <el-button   style="float: right" size="mini">添加</el-button>

  </el-card>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;margin-top: 20px"
      @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column

        label="编号"
        width="180">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column

        label="商品图片"
        width="180">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column

        label="商品名称">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column

        label="价格/货号">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column

        label="标签">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column

        label="排序">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column

        label="SKU库存">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>


      <el-table-column

        label="销量">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column

        label="审核状态">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>

      <el-table-column

        label="操作">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
    </el-table>

    <div class="batch-operate-container">
      <el-select
        size="small"
        v-model="operateType" placeholder="批量操作">
        <el-option
          v-for="item in operates"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        style="margin-left: 20px"
        class="search-button"
        @click="handleBatchOperate()"
        type="primary"
        size="small">
        确定
      </el-button>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total">
      </el-pagination>
    </div>



  </div>




    
</template>

<script>

  const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 5,
    publishStatus: null,
    verifyStatus: null,
    productSn: null,
    productCategoryId: null,
    brandId: null
  };


    export default {
        name: "index",
        data() {
        return {
          tableData: [{
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          listQuery: Object.assign({}, defaultListQuery),
        }
      },
        method:{

          toggleSelection(rows) {
            if (rows) {
              rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },

          handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
          },
          handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
          },

        }
    }





</script>

<style scoped>

</style>
